<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true" >
			<block slot="content">投诉建议</block>
		</cu-custom>
		<view class="padding">
			<text>反馈类型</text>
			<view class="grid col-3 margin-top-xs">
				<view class="padding-sm" v-for="item in WEBCONFIG.feedback_type" :key="item.value">
					<view class="item bg-gray padding-xs radius text-center" :class="form.feedback_type == item.value ? 'china-btn-bg-green' : ''" @tap="form.feedback_type = item.value">
						{{item.label}}
					</view>
				</view>
			</view>
			<view class="padding-sm">
				<textarea maxlength="250" placeholder="请输入6个字以上的问题描述" class="bg-gray radius desc padding-sm" v-model="form.content"></textarea>
			</view>
			<view class="margin-top">
				<text>联系方式</text>
				<view class="padding-sm">
					<view class="item bg-gray radius mobile-input">
						<input type="tel" placeholder="请输入手机号便于联系(非必填)" v-model="form.mobile" class="radius-lg padding-sm box-sizing-none" maxlength="11">
					</view>
				</view>
			</view>
			
			<view class="submit padding flex flex-direction">
				<button class="cu-btn china-btn-bg margin-tb-sm lg round shadow" @click="submit()">提交反馈</button>
			</view>
		</view>
		<loading v-if="pageLoading" />
	</view>
</template>

<script>
import { mapState } from 'vuex'
	export default {
		computed: {
			...mapState({
				WEBCONFIG: state => state.WEBCONFIG,
			})
		},
		data() {
			return {
				pageLoading: false,
				form:{
					feedback_type:'',
					content:'',
					mobile:''
				}
			};
		},
		methods:{
			submit(){
				this.pageLoading = true
				this.$utils.$api.Feedback.create(this.form).then((res)=>{
					this.$utils.$message.success(res.msg);
					setTimeout(()=>{
						uni.navigateBack()
					})
				}).catch(err=>{
					this.$utils.$message.error(err.msg)
				}).finally(()=>{
					this.pageLoading = false
				})
			}
		}
	}
</script>

<style lang="less" scoped>
.mobile-input{
	padding: 10rpx;
}
.desc{
	width: 100%;
}
.box-sizing-none{
	box-sizing:content-box;
}
</style>
